﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/AdminMTP.Master" AutoEventWireup="true" CodeBehind="Composer.aspx.cs" Inherits="tracnghiemonline2.Admin1" %>

<%@ Import Namespace="DataAccess" %>
<%@ Import Namespace="System.Linq" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script src="../Ajax/JS/Certificate.js"></script>
    <script src="../Scripts/tinymce/tinymce.min.js"></script>
    <script src="../Scripts/tinymce/plugins/furigana/plugin.min.js"></script>
    <style>
        .mce-tinymce {
            float: right !important;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <%var get_cer = new TblCertificateController().FetchAll(); %>
    <div id="main-admin" class="compo-content w3-light-grey">
        <header class="w3-padding w3-large w3-center w3-teal">SOẠN ĐỀ</header>
        <div class="w3-row w3-border-bottom w3-border-teal" style="padding: 5px">
            <div class="exam-pick w3-col l3 w3-padding">
                <div class="w3-row w3-margin-bottom">
                    <select id="ddl_certificate" class="choose w3-teal">
                        <option value="0" selected="selected">Chọn trình độ</option>
                        <%foreach (TblCertificate cer in get_cer)
                          { %>
                        <option value="<%=cer.CerId %>"><%=cer.CerTitle %></option>
                        <%} %>
                    </select>
                    <a id="edit_cer" class="w3-btn w3-teal" style="margin-bottom: 3px; display: none" title="Tùy chọn"><i class="fa fa-cogs"></i></a>
                    <a onclick="document.getElementById('thembang').style.display='block'" class="w3-btn w3-teal" style="margin-bottom: 3px" title="Thêm bằng"><i class="fa fa-plus"></i></a>
                </div>
                <div id="test_area" class="w3-row" style="display: none">
                    <header class="w3-center w3-padding w3-large">Chọn bài</header>
                    <div class="test-list">
                        <ul id="test_list" class="w3-ul w3-hoverable w3-white">
                        </ul>
                    </div>
                    <div class="w3-padding w3-center">
                        <a id="add_test" class="w3-btn w3-teal" title="Thêm bài"><i class="fa fa-plus"></i>&nbsp;Thêm bài</a>
                    </div>
                </div>
            </div>
            <div id="question_area" class="w3-col l9 w3-padding" style="display: none">
                <header class="w3-center w3-xlarge">Danh sách câu hỏi</header>
                <div class="question-list" id="question_list">
                </div>
                <div class="w3-padding w3-center">
                    <a class="add_test_detail w3-btn w3-teal" title="Thêm câu hỏi"><i class="fa fa-plus"></i>&nbsp;Thêm câu hỏi</a>
                    <a onclick="document.getElementById('suabai').style.display='block'" class="test_edit w3-btn w3-teal" title="Sửa bài"><i class="fa fa-cog"></i>&nbsp;Sửa bài</a>
                    <a onclick="document.getElementById('xoabai').style.display='block'" class="w3-btn w3-teal" title="Xóa bài"><i class="fa fa-trash"></i>&nbsp;Xóa bài</a>
                </div>
            </div>
        </div>
        <div id="themcauhoi" class="questions w3-row w3-teal w3-animate-bottom" style="display: none">
        </div>
        <div id="media-collection" class="w3-modal" style="padding-top: 3%">
            <div class="w3-modal-content w3-animate-top w3-card-8" style="width: 1000px">
                <header class="w3-padding w3-center w3-teal">
                    <span class="w3-large">Thư viện</span>
                </header>
                <div class="w3-row w3-border-bottom w3-border-teal w3-card-2">
                    <div onclick="openmedia(event, 'pic')" class="media-link w3-third w3-center w3-border-right w3-border-teal w3-bottombar"><span><i class="fa fa-picture-o"></i>&nbsp;Hình ảnh</span></div>
                    <div onclick="openmedia(event, 'sou')" class="media-link w3-third w3-center w3-border-right w3-border-teal deactive"><span><i class="fa fa-volume-up"></i>&nbsp;Âm thanh</span></div>
                    <div onclick="openmedia(event, 'vid')" class="media-link w3-third w3-center w3-border-teal deactive"><span><i class="fa fa-video-camera"></i>&nbsp;Video</span></div>
                </div>
                <%var get_pic = (from p in new TblLibraryController().FetchAll().Where(x => x.LibraryType == 1) orderby p.LibraryId descending select p).Take(12);
                  var get_all_pic = new TblLibraryController().FetchAll().Where(x => x.LibraryType == 1).ToList();
                  int total_pic = get_all_pic.Count;
                  int count_pic = 0;
                  %>
                <div id="pic" class="media-content">
                    <div id="pic_area" class="w3-row w3-padding">
                        <%
                            foreach (TblLibrary pic in get_pic)
                          {
                              count_pic++;
                                  string date = DateTime.Parse(pic.LibraryUploadDate.ToString()).Day.ToString() + "/" + DateTime.Parse(pic.LibraryUploadDate.ToString()).Month.ToString() + "/" + DateTime.Parse(pic.LibraryUploadDate.ToString()).Year.ToString();
                                  var get_upload = new TblManagerController().FetchAll().Where(x => x.ManagerId == pic.LibraryUploader).Single();
                        %>
                        <div data-toggle="tooltip" data-placement="bottom" title="Tải lên <%=date %> bởi <%=get_upload.FullName %>" class="media-item w3-quarter w3-center hvr-float">
                            <div class="w3-hide media-link">../Content/testdata/picture/<%=pic.LibraryLink %></div>
                            <div class="media-box w3-display-container">
                                <img class="media-item-content w3-display-bottommiddle" src="../Content/testdata/picture/<%=pic.LibraryLink %>" />
                            </div>
                            <span><%=pic.LibraryName %></span>
                        </div>
                        <%} %>
                    </div>
                    <%if(count_pic<total_pic){ %>
                    <div id="load_more_img" class="w3-row w3-padding w3-center">
                        <div class="w3-hide total_media"><%=total_pic %></div>
                        <a id="btn_load_more_img" class="load-more-btn w3-btn w3-teal hvr-icon-spin">Xem thêm</a>
                    </div>
                    <%} %>
                </div>

                <div id="sou" class="media-content" style="display: none">
                    <div id="audio_area" class="w3-row w3-padding">
                        <%var get_audio = (from p in new TblLibraryController().FetchAll().Where(x => x.LibraryType == 2) orderby p.LibraryId descending select p);
                          var get_all_audio = new TblLibraryController().FetchAll().Where(x => x.LibraryType == 2).ToList();
                          int total_audio = get_all_audio.Count;
                          int count_audio = 0;
                          foreach (TblLibrary audio in get_audio)
                          {
                              count_audio++;
                                  string date = DateTime.Parse(audio.LibraryUploadDate.ToString()).Day.ToString() + "/" + DateTime.Parse(audio.LibraryUploadDate.ToString()).Month.ToString() + "/" + DateTime.Parse(audio.LibraryUploadDate.ToString()).Year.ToString();
                                  var get_upload = new TblManagerController().FetchAll().Where(x => x.ManagerId == audio.LibraryUploader).Single();
                        %>
                        <div data-toggle="tooltip" data-placement="bottom" title="Tải lên <%=date%> bởi <%=get_upload.FullName%>" class="media-item w3-quarter w3-center hvr-float">
                            <div class="w3-hide media-link">../Content/testdata/audio/<%=audio.LibraryLink %></div>
                            <video class="media-sound-item" src="../Content/testdata/audio/<%=audio.LibraryLink%>" poster="../Content/img/posterdefault.jpg" controls="controls"></video>
                            <span><%=audio.LibraryName%></span>
                        </div>
                        <%} %>
                    </div>
                    <%if(count_audio<total_audio){ %>
                    <div class="w3-row w3-padding w3-center">
                        <div class="w3-hide total_media"><%=total_audio %></div>
                        <a id="btn_load_more_audio" class="load-more-btn w3-btn w3-teal hvr-icon-spin">Xem thêm</a>
                    </div>
                    <%} %>
                </div>
                <div id="vid" class="media-content" style="display: none">
                    <div id="video_area" class="w3-row w3-padding">
                        <%var get_video = (from p in new TblLibraryController().FetchAll().Where(x => x.LibraryType == 3) orderby p.LibraryId descending select p).Take(12);
                          var get_all_video = new TblLibraryController().FetchAll().Where(x => x.LibraryType == 3).ToList();
                          int total_video = get_all_video.Count;
                          int count_video = 0;
                          foreach (TblLibrary video in get_video)
                          {
                              count_video++;
                                  string date = DateTime.Parse(video.LibraryUploadDate.ToString()).Day.ToString() + "/" + DateTime.Parse(video.LibraryUploadDate.ToString()).Month.ToString() + "/" + DateTime.Parse(video.LibraryUploadDate.ToString()).Year.ToString();
                                  var get_upload = new TblManagerController().FetchAll().Where(x => x.ManagerId == video.LibraryUploader).Single();
                        %>
                        <div data-toggle="tooltip" data-placement="bottom" title="Đăng <%=date %> bởi <%=get_upload.FullName %>" class="media-item w3-quarter w3-center hvr-float">
                            <div class="w3-hide media-link">https://www.youtube.com/embed/<%=video.LibraryLink %></div>
                            <iframe width="100%" src="https://www.youtube.com/embed/<%=video.LibraryLink %>" frameborder="0" allowfullscreen></iframe>
                            <br />
                            <span><%=video.LibraryName %></span>
                        </div>
                        <%} %>
                    </div>
                    <%if(count_video<total_video){ %>
                    <div class="w3-row w3-padding w3-center">
                        <div class="w3-hide total_media"><%=total_video %></div>
                        <a id="btn_load_more_video" class="load-more-btn w3-btn w3-teal hvr-icon-spin">Xem thêm</a>
                    </div>
                    <%} %>
                </div>
                <div class="media-option w3-row w3-padding w3-center w3-teal">
                    <div class="w3-half w3-center">
                        <label>Đường dẫn</label>&nbsp;<input id="library_link" type="text" class="w3-text-black" disabled="disabled" value="" />
                    </div>
                    <a onclick="document.getElementById('upload-media-modal').style.display = 'block'" class="w3-btn w3-teal w3-border"><i class="fa fa-upload"></i>&nbsp;Tải lên Hình ảnh/Âm thanh</a>
                    <a onclick="document.getElementById('post-video-modal').style.display = 'block'" class="w3-btn w3-teal w3-border"><i class="fa fa-film"></i>&nbsp;Đăng video</a>
                    <a class="w3-btn w3-teal w3-border" onclick="this.parentElement.parentElement.parentElement.style.display='none'">&nbsp;Đóng</a>
                </div>
            </div>
        </div>

        <div id="upload-media-modal" class="w3-modal">
            <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 500px">
                <header class="w3-padding w3-center">
                    <span class="w3-large">Tải lên Hình ảnh/Âm thanh</span>
                </header>
                <div class="w3-row w3-padding w3-center">
                    <input type="file" class="changewallpaper" name="fileUpload" id="fileUpload" />
                    <label for="fileUpload" class="w3-btn w3-border w3-teal"><i class="fa fa-folder"></i>&nbsp;Chọn tập tin</label>
                </div>
                <div class="w3-row w3-padding w3-center">
                    <video style="max-width: 100%; display: none" class="media-upload-sound" id="audio_upload" poster="../Content/img/posterdefault.jpg" controls="controls"></video>
                    <img id="img_upload" src="../Content/img/posterdefault.jpg" style="max-width: 100%; display: none" />
                </div>
                <div id="upload_name" class="w3-row w3-center" style="display:none">
                    <input type="text" id="txt_file_name" autofocus="autofocus" placeholder="Đặt tên cho tập tin" style="width: 50%" maxlength="30" class="class-editor w3-center" />
                </div>
                <div class="w3-row w3-padding w3-center">
                    <a id="btn_upload_file" class="w3-btn w3-teal w3-border"><i class="fa fa-upload"></i>&nbsp;Tải lên</a>
                    <a class="w3-btn w3-teal w3-border" onclick="this.parentElement.parentElement.parentElement.style.display='none'">&times;&nbsp;Hủy</a>
                </div>
            </div>
        </div>
        <div id="post-video-modal" class="w3-modal">
            <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 500px">
                <header class="w3-padding w3-center">
                    <span class="w3-large">Đăng video</span>
                </header>
                <div class="w3-row w3-padding">
                    <label class="w3-quarter">Đường dẫn</label><input id="txt_video_link" type="text" placeholder="Nhập đường dẫn của video" maxlength="30" class="class-editor w3-threequarter" />
                </div>
                <div class="w3-row w3-padding">
                    <label class="w3-quarter">Tên video</label><input id="txt_video_name" type="text" placeholder="Đặt tên cho video" maxlength="30" class="class-editor w3-threequarter" />
                </div>
                <div class="w3-row w3-padding w3-center">
                    <a class="w3-btn w3-teal w3-border" id="btn_upload_video"><i class="fa fa-film"></i>&nbsp;Đăng</a>
                    <a class="w3-btn w3-teal w3-border" onclick="this.parentElement.parentElement.parentElement.style.display='none'">&times;&nbsp;Hủy</a>
                </div>
            </div>
        </div>
    </div>
    <div id="thembang" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 30%">
            <header class="w3-padding w3-center">
                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                <p class="w3-xlarge">Thêm mới trình độ</p>
            </header>
            <div class="w3-padding w3-row">
                <input id="txt_add_cer" type="text" required="required" placeholder="Trình độ" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
            </div>
            <div class="w3-row w3-padding w3-center">
                <a class="btn_add_cer w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-save"></i>&nbsp;Lưu</a>
            </div>
        </div>
    </div>
    <div id="chinhsuabang" class="w3-modal">
    </div>
    <div id="xoabang" class="w3-modal">
    </div>
    <div id="thembai" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="">
            <header class="w3-padding w3-center">
                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                <p class="w3-xlarge">Thêm mới bài</p>
            </header>
            <div class="w3-padding w3-row">
                <label class="w3-quarter">Tên bài</label>
                <input id="new_test_name" type="text" required="required" autofocus="autofocus" style="width: 50%; padding: 0.5%; color: black" />
            </div>
            <div class="w3-padding w3-row">
                <label class="w3-quarter">Thời gian làm bài (Phút)</label>
                <input id="new_test_time" type="number" step="5" min="1" required="required" autofocus="autofocus" style="width: 50%; padding: 0.5%; color: black" />
            </div>
            <div class="w3-row w3-padding">
                <label class="w3-quarter">Loại bài</label>
                <div class="radio w3-half">
                    <input onclick="document.getElementById('d-day').style.display = 'none'" type="radio" name="test-type" value="0" id="thuong" checked="checked" /><label for="thuong">Thường</label>&nbsp;
                            <input onclick="document.getElementById('d-day').style.display = 'block'" type="radio" name="test-type" value="1" id="thikt" /><label for="thikt">Thi/Kiểm tra</label>
                </div>
            </div>
            <div id="d-day" class="w3-padding w3-row w3-animate-left" style="display: none;">
                <label class="w3-quarter">Ngày mở bài</label>
                <input id="new_test_start" type="datetime-local" style="width: 50%; padding: 0.5%; color: black" />
            </div>
            <div class="w3-row w3-padding">
                <label class="w3-quarter">Cấp quyền</label>
                <div class="checkbox w3-half">
                    <%
                        var get_level = new TblUserRoleController().FetchAll().ToList();
                        for (int i = 1; i <= get_level.Count; i++)
                        {
                    %>
                    <input type="checkbox" value="<%=get_level[i-1].RoleId %>" id="quyen<%=i %>" class="user_level" /><label for="quyen<%=i %>"><%=get_level[i-1].RoleName %></label>&nbsp;&nbsp;&nbsp;&nbsp;
                  <%} %>
                </div>
            </div>
            <div class="w3-row w3-padding">
                <label class="w3-quarter">Đóng/Mở bài</label>
                <div class="w3-half w3-xlarge">
                    <div id="active" class="w3-hide">0</div>
                    <i class="on fa fa-toggle-on fa-rotate-180 w3-text-red w3-animate-opacity off"></i>

                </div>
            </div>
            <div class="w3-row w3-padding w3-center">
                <a class="btn_add_test w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-save"></i>&nbsp;Lưu</a>
            </div>
        </div>
    </div>
    <div id="suabai" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="">
            <header class="w3-padding w3-center">
                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                <p class="w3-xlarge">Sửa bài</p>
            </header>
            <div id="test_edit">
            </div>
        </div>
    </div>
    <div id="xoabai" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 45%">
            <header class="w3-padding w3-center">
                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                <p class="w3-xlarge">Bạn có chắc chắn muốn xóa bài này ?</p>
            </header>
            <div class="w3-row w3-padding w3-center">
                <a class="test_del w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-trash"></i>&nbsp;Xóa</a>
                <a onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
            </div>
        </div>
    </div>
    <div id="xoacauhoi" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 45%">
            <header class="w3-padding w3-center">
                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                <p class="w3-xlarge">Bạn có chắc chắn muốn xóa câu hỏi này ?</p>
            </header>
            <div class="w3-row w3-padding w3-center">
                <a class="test_detail_del w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-trash"></i>&nbsp;Xóa</a>
                <a onclick="document.getElementById('xoacauhoi').style.display='none'" class="w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-times"></i>&nbsp;Hủy</a>
            </div>
        </div>
    </div>
    <div id="themloaich" class="w3-modal">
        <div class="w3-modal-content w3-animate-top w3-card-8 w3-teal" style="width: 30%">
            <header class="w3-padding w3-center">
                <span onclick="this.parentElement.parentElement.parentElement.style.display='none'" class="w3-closebtn">&times;</span>
                <p class="w3-xlarge">Thêm loại câu hỏi</p>
            </header>
            <div class="w3-padding w3-row">
                <input id="txt_add_type" type="text" required="required" placeholder="Loại câu hỏi" autofocus="autofocus" style="width: 100%; padding: 0.5%; color: black" />
            </div>
            <div class="w3-row w3-padding w3-center">
                <a class="btn_add_type w3-btn w3-teal w3-border w3-border-white"><i class="fa fa-save"></i>&nbsp;Lưu</a>
            </div>
        </div>
    </div>
    <div id="chinhsualoaich" class="w3-modal">
    </div>
    <div id="xoaloaich" class="w3-modal">
    </div>
    <script>
        function open_question_type(evt, cityName) {
            var i, x, tablinks;
            x = document.getElementsByClassName("city");
            for (i = 0; i < x.length; i++) {
                x[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablink");
            for (i = 0; i < x.length; i++) {
                tablinks[i].className = tablinks[i].className.replace(" w3-teal", "");
            }
            document.getElementById(cityName).style.display = "block";
            evt.currentTarget.className += " w3-teal";
        }
    </script>

</asp:Content>
